User Manual: Loading Supplier Ledger Data into the Purchase Form

Step 1: User Types in the View

In the Purchase Create view (create.blade.php), the user interacts with the Supplier input field:

<input type="text" id="_search_main_ledger_id" class="form-control _search_main_ledger_id" placeholder="Supplier">

This field is used exclusively for searching. The actual selected Supplier ID is stored in an adjacent hidden input with id _main_ledger_id.

Step 2: JavaScript Captures the Keyup Event

In the global JavaScript file (public/backend/js/main.js), there is a jQuery event listener attached to the ._search_main_ledger_id class. As the user types, it waits briefly (using a delay/debounce function) and sends an AJAX GET request.

$(document).on('keyup','._search_main_ledger_id',delay(function(e){
    var _text_val = $(this).val().trim();
    var _form = $(document).find("._search_form_value").val(); // Form Type
    var action_url = project_base_url + "/main-ledger-search";

    var request = $.ajax({
        url: action_url,
        method: "GET",
        data: { _text_val, _form },
        dataType: "JSON"
    });
    ...
}));

Step 3: Route to Controller

The URL /main-ledger-search routes to the mainLedgerSearch method inside the AccountLedgerController.

Step 4: Controller Query Logic

The mainLedgerSearch function executes. It receives the typed text via the $request object and queries the account_ledgers database table using the AccountLedger model.

public function mainLedgerSearch(Request $request){
    ...
    $text_val = $request->_text_val;
    $_form = $request->_form ?? 1;
    
    // Select specific columns from the 'account_ledgers' table
    $datas = AccountLedger::select('id','_name','_code','_address','_balance','_phone');
    
    // Filter based on form type (e.g., Purchase Form = 1)
    if($_form == 1){
        $datas = $datas->where('_is_purchase_form','=',1);
    }
    
    // Perform search by Name, ID, or Phone
    if($request->has('_text_val') && $request->_text_val !=''){
        $datas = $datas->where('_name','like',"%$request->_text_val%")
        ->orWhere('id','like',"%$request->_text_val%")
        ->orWhere('_phone','like',"%$request->_text_val%");
    }
    
    $datas = $datas->orderBy($asc_cloumn,$_asc_desc)->paginate($limit);
    return json_encode( $datas); 
}

The controller returns the matching records back to the AJAX handler in JSON format.

Step 5: JavaScript Renders the Suggestion Dropdown

Once the AJAX request succeeds in main.js, it loops through the returned data and constructs an HTML table of search suggestions.

This table is injected directly into a container class named .search_box_main_ledger located right underneath the Supplier input field.

_gloabal_this.parent('div').find('.search_box_main_ledger').html(search_html);
_gloabal_this.parent('div').find('.search_box_main_ledger').show();

Step 6: User Selects a Ledger

When the user clicks a row in the generated suggestion dropdown (triggering the .search_row_ledger click event), the JavaScript catches it and performs the final auto-fill:

$(document).on("click",'.search_row_ledger',function(){
    var _id = $(this).children('td').find('._id_main_ledger').val();
    var _name = $(this).find('._name_main_ledger').val();
    var _address_main_ledger = $(this).find('._address_main_ledger').val();
    var _phone_main_ledger = $(this).find('._phone_main_ledger').val();

    // Fill hidden and visible inputs
    $(document).find("._main_ledger_id").val(_id);
    $(document).find("._search_main_ledger_id").val(_name);
    $(document).find("._phone").val(_phone_main_ledger);
    $(document).find("._address").val(_address_main_ledger);

    // Hide the dropdown box
    $(document).find('.search_box_main_ledger').hide();
})

This populates the visible Supplier Name field, the hidden Supplier ID field used for form submission, and automatically fills the corresponding Phone and Address input fields on the create form.